<!-- src/components/TodoHeader.vue -->
<template>
    <div class="todo-header">
      <h2 class="todo-title">我的任务清单</h2>
      <div class="task-stats">
        <div class="stat-badge active">
          <span class="stat-icon">⏳</span>
          <span class="stat-number">待完成任务: {{ remainingCount }}</span>
        </div>
        <div class="stat-badge completed">
          <span class="stat-icon">✓</span>
          <span class="stat-number">已完成任务: {{ completedCount }}</span>
        </div>
        <div class="stat-badge total">
          <span class="stat-icon">📋</span>
          <span class="stat-number">全部任务: {{ totalCount }}</span>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TodoHeader',
    props: {
      remainingCount: {
        type: Number,
        required: true
      },
      completedCount: {
        type: Number,
        required: true
      },
      totalCount: {
        type: Number,
        required: true
      }
    }
  }
  </script>